import { useState } from 'react';
import { Form, Modal } from 'antd';
import { FormModalContext } from './FormModalContext';
import { useFormModal } from './utils';
import ModalContainer from './ModalContainer';
import FormContent from './FormContent';
import type { AnyObject, FormModalProps } from '../type';

const FormModal = <T extends object = AnyObject>(props: FormModalProps<T>) => {
	const {
		modal,
		form: formInstance,
		modalProps,
		formHeadSlot,
		formFooterSlot,
		footer,
		formProps,
		formItems,
		columnGap = 10,
		closeWarnProps,
		fullscreen,
		draggable = true,
		bodyHeight,
		onConfirm
	} = props;
	const [modalRef] = useFormModal(modal);

	// close拦截提示窗
	const [closeModal, closeModalContext] = Modal.useModal();
	// 是否全屏
	const [full, setFull] = useState(fullscreen);
	// form组件实例
	const form = formInstance || Form.useForm<T>()[0];

	return (
		<FormModalContext.Provider value={modalRef}>
			<ModalContainer<T>
				form={form}
				modalProps={modalProps}
				closeWarnProps={closeWarnProps}
				fullscreen={fullscreen}
				closeModal={closeModal}
				draggable={draggable}
				full={full}
				setFull={setFull}
			>
				<FormContent
					form={form}
					formItems={formItems}
					formProps={formProps}
					columnGap={columnGap}
					formHeadSlot={formHeadSlot}
					formFooterSlot={formFooterSlot}
					footer={footer}
					closeModal={closeModal}
					closeWarnProps={closeWarnProps}
					full={full}
					bodyHeight={bodyHeight}
					onConfirm={onConfirm}
				/>
			</ModalContainer>
			{/* close拦截提示窗 */}
			{closeModalContext}
		</FormModalContext.Provider>
	);
};

export default FormModal;
